import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { Button } from 'semantic-ui-react'
import { global as globalDuck } from 'ducks'
import ListTable from 'components/ListTable'
import getMsgPageInfo from 'graphql/message/getMsgPageInfo.graphql'
import getMsg from 'graphql/message/getMessage.graphql'
import ConfirmMessage from 'graphql/message/confirmMessage.graphql'
import { PaddingContainer } from 'components/containers'
import { Mutation } from 'react-apollo'

const FileList = () => ({ data }) => (
  <React.Fragment>
    {data.message.map(msg => (
      <ListTable.Row hasCheckBox>
        <ListTable.Avatar src={msg.user_from_object.avatar} text={msg.user_from_object.name} />
        <ListTable.Cell>{msg.type}</ListTable.Cell>
        <ListTable.Cell>{msg.create_at}</ListTable.Cell>
        <ListTable.Cell>
          {msg.state === 'pending' && (
            <Mutation mutation={ConfirmMessage}>
              {(updateTodo, { loading, error, data }) => {
                if (loading) {
                  return (
                    <Button positive loading disabled>
                      Save
                    </Button>
                  )
                }
                if (error) return <p>Error :( Please try again</p>
                if (data) {
                  return (
                    <Button disabled positive>
                      已同意
                    </Button>
                  )
                }
                return (
                  <Button
                    positive
                    onClick={() => {
                      updateTodo({ variables: { msgId: msg.id } })
                    }}
                  >
                    同意
                  </Button>
                )
              }}
            </Mutation>
          )}
        </ListTable.Cell>
      </ListTable.Row>
    ))}
  </React.Fragment>
)

class Message extends Component {
  componentDidMount = () => {}

  render() {
    const { user } = this.props
    const RenderList = FileList()
    const inviteUrl = ''
    return (
      <PaddingContainer>
        <ListTable
          pagination={{
            query: getMsgPageInfo,
            name: 'message_aggregate',
            variables: {
              userTo: user.id,
            },
          }}
          listData={{
            query: getMsg,
            variables: {
              userTo: user.id,
            },
            header: (
              <ListTable.Header hasCheckBox>
                <ListTable.HeaderCell
                  style={{
                    wordBreak: 'keep-all',
                    whiteSpace: 'nowrap',
                  }}
                >
                  发信人
                </ListTable.HeaderCell>
                <ListTable.HeaderCell />
                <ListTable.HeaderCell>消息类型</ListTable.HeaderCell>
                <ListTable.HeaderCell>发送时间</ListTable.HeaderCell>
                <ListTable.HeaderCell />
              </ListTable.Header>
            ),
            render: <RenderList />,
          }}
          holder={{
            description: '没有任何通知',
          }}
        />
      </PaddingContainer>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

export default connect(
  mapStateToProps,
  null,
)(Message)
